<template>
  <common-dialog
    ref="dialog"
    width="1000px"
    title="账单详情"
    :inDialog="inDialog"
    :data="data"
    @closed="onClosed"
  >
    <common-form
      ref="form"
      text-mode
      label-width="100px"
    >
      <el-divider>账单信息</el-divider>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="账单ID">{{data.id}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账单号">{{data.no}}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="计费日期">{{data.accountDate}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到期日期">{{data.dueDate}}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="创建时间">{{ data.creationTime }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最后更新时间">{{ data.lastModificationTime }}</el-form-item>
        </el-col>
      </el-row>
      <el-divider>费用信息</el-divider>
      <el-table border :data="data.charges">
        <el-table-column
          type="index"
          align="center"
          :width="40"
          label="#"
        />
        <el-table-column label="类型" prop="wayName" width="80" align="center"></el-table-column>
        <el-table-column label="币种" prop="currency" width="80" align="center"></el-table-column>
        <el-table-column label="单价" prop="unitPrice" width="100"></el-table-column>
        <el-table-column label="数量" prop="qty" width="80"></el-table-column>
        <el-table-column label="金额" prop="amount" width="100"></el-table-column>
        <el-table-column label="已核销金额" prop="payAmount" width="100"></el-table-column>
        <el-table-column label="费用代码" prop="chargeCodeName"></el-table-column>
         <el-table-column
          prop="creationTime"
          width="120"
          label="创建时间"
          sortable="custom"
        >
          <template v-slot="{ row }">
            <span>{{ row.creationTime | toShortDatetimeString }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-divider>工作流关联信息</el-divider>
      <el-table border :data="data.workflows">
        <el-table-column
          type="index"
          align="center"
          :width="40"
          label="#"
        />
        <el-table-column label="币种" prop="currency"></el-table-column>
        <el-table-column label="金额" prop="amount" ></el-table-column>
        <el-table-column label="币种金额" prop="currencyAmount" ></el-table-column>
        <el-table-column label="申请金额" prop="currencyAmount" ></el-table-column>
        <el-table-column label="工作流编号" prop="workflowNo"></el-table-column>
      </el-table>
    </common-form>
    <template slot="footer">
      <el-button
        type="primary"
        @click="openChargeCdcDialog"
      >费用变更记录</el-button>
    </template>
    <detail-dialog
      ref="detailDialog"
      in-dialog
    ></detail-dialog>
    <charge-cdc-list-dialog
      ref="chargeCdcListDialog"
      in-dialog
    />
  </common-dialog>
</template>
<script>
import commonDialog from "@/components/common/dialog";
import commonForm from "@/components/common/form";
import chargeCdcListDialog from "./chargeCdcListDialog";
import api from "@/api/fam/bill";

export default {
  props: {
    inDialog: {
      type: Boolean,
      default: false
    },
  },
  components: {
    commonDialog,
    commonForm,
    chargeCdcListDialog
  },
  data() {
    return {
      syncEsLoading: false,
      syncIcpLoading: false,
      resetNameLoading: false,
      repairLoading: false,
      data: {
        id: "",
        name: "",
        mergerId: "",
        code: "",
        enName: "",
        zhName: ""
      },
      api,
    };
  },
  created() {
    this.$options.components.detailDialog = () => import('./detailDialog')
  },
  methods: {
    openDetail(id) {
      this.$refs.dialog.open().then(() => {
        this.getData(id);
      });
    },
    getData(id) {
      this.$refs.dialog.loading(true);
      api.getDetail(id).then((res) => {
        this.$refs.dialog.loading(false);
        if (res.code != 0) {
          return;
        }
        this.data = res.data;
      });
    },
    onClosed() {
      this.$refs.commonForm.reset();
    },
    openChargeCdcDialog() {
      this.$refs.chargeCdcListDialog.openQuery({
        billIds: [this.data.id]
      });
    },
    syncCustomerToEs() {
      this.syncEsLoading = true;
      api.syncCustomersToEs({ ids: [this.data.id] }).then(() => {
        this.syncEsLoading = false;
      });
    },
    syncCustomerToIcp() {
      this.syncIcpLoading = true;
      api.syncCustomersToIcp({ ids: [this.data.id] }).then(() => {
        this.syncIcpLoading = false;
      });
    },
    resetNameUniqueValue() {
      this.resetNameLoading = true;
      api.resetNameUniqueValue({ ids: [this.data.id] }).then((res) => {
        this.resetNameLoading = false;
      });
    },
    repairExamineStatus() {
      this.repairLoading = true;
      api.repairExamineStatus({ ids: [this.data.id] }).then((res) => {
        this.repairLoading = false;
      });
    },
    openMainCustomer() {
      this.$refs.detailDialog.openDetail(this.data.mergerId);
    },
    openOldIcpDetail() {
      this.$refs.oldIcpDetailDialog.openDetail(this.data.id);
    },
    relieveMerger() {

    }
  },
};
</script>